<template>
  <div class="content">
    <h2>{{ message }}</h2>
    <ShowInfo name="why" 
      :age="18" @show-info-click="showInfoClick"
      ref="showInfoRef">
    </ShowInfo><!--相互独立,数据之间不会相互影响-->
    <ShowInfo></ShowInfo>
    <ShowInfo></ShowInfo>
    <button @click="changMessage">change</button>
  </div>
</template>

<script setup>
  import ShowInfo from './ShowInfo.vue' 
  import { ref, onMounted } from 'vue'
  // 所有编写在顶层(script)中的代码都是默认暴露给template的,可以直接使用
  const message = ref("hello world")

  function changMessage() {
    let newMessage = "hello vue3" //  let 声明的变量是局部变量,不会暴露给template
    message.value = newMessage
    console.log("foo")
  }

  function showInfoClick(playload) {
    console.log("监听到showInfo组件内部的点击: ", playload)
  }
  // 获取组件实例
  const showInfoRef = ref()
  onMounted(() => {
    console.log(showInfoRef.value)
    showInfoRef.value.foo()
  })

</script>

<style scoped>
</style>